<template>
	<div class="findBook">
		<ul class="imglist">
			<li v-for="item in proplist">
				<img :src="item.pic" />
				<span class="p2">{{item.name}}</span>
				<span class="p1">独播</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'MobilefindBooks',
		props: ['proplist'],
		data() {
			return {
				list: []
			}
		},
		mounted() {
			console.log(this.proplist);

		}
	}
</script>

<style>
	.findBook {
		width: 100%;
		margin: 0;
	}

	.findBook img {
		width: 30vw;
		height: 40vw;

	}

	.imglist {
		display: flex;
		color: white;
		text-align: center;
		font-size: 0.8rem;
	}

	.imglist img {
		text-align: center;
	}

	.imglist li span.p2 {
		
		
	}

	.imglist li span.p1 {
		/* font-size: 0.7rem; */
		/* align-self: center; */
		position: relative;
		top: -152px;
		left: 15px;

		padding: 0.5rem 0.3rem;
		/* 单独设置某个角 为圆角 */
		border-radius: 0 0 0 0.6rem;
		background-color: orange;
	}
</style>
